<template>
  <div class="banner-list-color">
    <el-row :gutter="20">
      <el-col v-for="(i,j) in data" :key="j" :md="8" :sm="12" :xs="12">
        <div class="card">
          <img :src="i.image[0]" :alt="i.name" class="image" />
          <div class="container">
            <h4>{{i.subtitle}}</h4>
            <p>{{i.overview}}</p>
            <div style="text-align: right;">
              <router-link :to="`/user/product/${i.id}`">
                了解详细
                <i class="el-icon-d-arrow-right"></i>
              </router-link>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  props: ['data']
}
</script>

<style lang="less" scope>
.banner-list-color {
  .card {
    border: 1px solid #ddd;
    cursor: pointer;
    margin-bottom: 10px;
    overflow: hidden;
    .image {
      height: 200px;
      display: block;
      margin: 0 auto;
    }
    .container {
      height: 200px;
      padding: 15px;
      background-color: #f5f5f5;
      border-bottom: 3px solid #409eff;
      transition: 0.3s all ease;
      h4 {
        color: #3b3b3b;
        margin: 0;
      }
      p {
        height: 135px;
        font-size: 14px;
        color: #606060;
        box-sizing: border-box;
        overflow: hidden;
      }
      a {
        color: #409eff;
        text-decoration: none;
      }
    }
    &:hover {
      border-color: #409eff;
      .container {
        background-color: #409eff;
        h4,
        p,
        a {
          color: #fff;
        }
        a:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
